<template>
  <div class="components-container">
    <split-pane :min-percent="30" :default-percent="60" split="vertical" @resize="resize">
      <template slot="paneL">
        <Topic />
      </template>
      <template slot="paneR">
        <TopicSnippet />
      </template>
    </split-pane>
  </div>
</template>

<script>
import splitPane from 'vue-splitpane'
import Topic from './topic'
import TopicSnippet from './snippet'

export default {
  name: 'TopicHome',
  components: { splitPane, Topic, TopicSnippet },
  methods: {
    resize() {
      console.log('resize')
    }
  }
}
</script>

<style lang="scss"  scoped>
.components-container {
  position: relative;
  height: calc(100vh - 104px);
  margin: 10px 20px;
}
</style>
